<!-- 操作日志 -->
<template>
  <q-page class="q-px-xs">
    <!-- 查询操作 -->
    <q-toolbar>
      <!-- prettier-ignore -->
      <table-filter show-date date-label="操作时间" :model-value="query" @change="handleQuery">
        <q-select v-model="query.success" label="操作结果" :options="resultOptions" clearable dense @update:model-value="handleQuery" />
        <q-autocomplete v-model="query.operateType" label="操作类型" :options="operateTypeOptions" width="140" dense @update:model-value="handleQuery"/>
      </table-filter>
      <q-space />
      <q-btn v-has-role="['SuperAdmin']" icon="delete" color="error" :disable="!hasSelected" @click="handleDelete()">删除</q-btn>
      <q-btn v-has-role="['SuperAdmin']" :icon="mdiCloseOctagon" color="pink" class="q-mx-sm" @click="handleClear">清空</q-btn>
      <q-btn icon="excel" color="warning" :loading="exportLoading" @click="handleExport">导出</q-btn>
    </q-toolbar>

    <!-- 数据表格 -->
    <q-table :columns="columns" selection="multiple" v-bind="tableOptions">
      <template #body-cell-action="props">
        <q-td :props="props">
          <q-btn round flat :icon="mdiLightbulbOnOutline" color="primary" @click="showLogDetail(props.row)" />
          <q-btn v-has-role="['SuperAdmin']" round flat icon="delete" color="error" @click="handleDelete(props.row.logId)" />
        </q-td>
      </template>
    </q-table>

    <!-- 表单窗口 -->
    <q-dialog v-model="dialog" persistent>
      <log-detail :log="logDto" />
    </q-dialog>
  </q-page>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { mdiCloseOctagon, mdiLightbulbOnOutline } from '@quasar/extras/mdi-v6';

  import LogDetail from './LogDetail.vue';
  import { DEL_MESSAGE_WARNING, Message, MessageBox } from 'src/utils';
  import { usePageQuery, useTable, useCrudList, useDialog, queryOptions } from 'src/composables';
  import crudApi, { LogDto, clearLogs } from 'src/api/monitor/log';

  defineOptions({ name: 'Log' });

  // 查询条件
  const query = usePageQuery({}, true);

  // 表格数据
  const { tc, formatter } = useTable();
  const { tableOptions, handleQuery, hasSelected, handleDelete, exportLoading, handleExport } = useCrudList(crudApi, query, 'logId');
  const columns = [
    tc('operateType', '操作类型', 80, { align: 'center', format: (v) => operateTypeOptions.value.find((a) => a.value == v)?.label }),
    tc('logTitle', '日志类别', 150),
    tc('success', '操作结果', 80, { align: 'center', format: (v) => (v ? '成功' : '失败') }),
    tc('executeTime', '执行时长', 80, 'center'),
    tc('requestPath', '请求URL', 120, 'left'),
    tc('operateBy', '操作人', 100),
    tc('operateTime', '操作时间', 100, { align: 'center', format: formatter.date }),
    tc('clientIp', '客户端IP', 120, 'center'),
    tc('clientOs', '操作系统', 120, 'center'),
    tc('clientBrowser', '浏览器', 150),
    tc('action', '操作', 85, 'center'),
  ];

  const operateTypeOptions = ref<SelectOption[]>([]);
  onMounted(() => {
    queryOptions('operate-type').then((data) => (operateTypeOptions.value = data));
    handleQuery();
  });

  const resultOptions = ref<SelectOption[]>([
    { label: '成功', value: true },
    { label: '失败', value: false },
  ]);
  const handleClear = () => {
    MessageBox.confirm(`确认要清空当前查询条件下的所有日志吗？${DEL_MESSAGE_WARNING}`).onOk(() =>
      clearLogs(query).then(() => {
        Message.success('清除成功。');
        handleQuery();
      }),
    );
  };

  // 表单编辑窗口
  const logDto = ref({} as LogDto);
  const { dialog } = useDialog();
  const showLogDetail = (log: LogDto) => {
    logDto.value = log;
    dialog.value = true;
  };
</script>

<style lang="scss" scoped></style>
src/api/monitor/log
